<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<!doctype html>

<html class="no-js">

<head>
<style>
#beginDate {
	cursor: pointer;
	background-color: #FFFFFF;
}

#endDate {
	cursor: pointer;
	background-color: #FFFFFF;
}
</style>
	<%@ include file="./commoms/link.txt"%>
	<script src="assets/js/pagejs/viewanddelete.js"></script>
</head>

<body>
	<%@ include file="./commoms/userHeader.txt"%>
	<div class="admin-content">
		<div class="admin-content-body">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">表格</strong> / <small>Table</small>
				</div>
			</div>

			<hr>

			<div class="am-g">
				<div class="am-u-sm-12 am-u-md-6 am-u-lg-5">
					<div class="am-btn-toolbar">
						<div class="am-btn-group am-btn-group-xs">
							<button type="button" id="add" class="am-btn am-btn-default">
								<span class="am-icon-plus"></span>新增
							</button>

							<button type="button" id="batchdelete"
								class="am-btn am-btn-default">
								<span class="am-icon-trash-o"></span> 删除
							</button>
						</div>
					</div>
				</div>
				<div class="am-u-sm-12 am-u-md-3 am-u-lg-7">
					<div class="am-form-group">
						<form action="api/device/getoneinfo.do"
							class="am-form am-form-inline" id="condition">
							<div class="am-form-group am-form-icon am-input-group-sm">
								<i class="am-icon-calendar"></i> <input type="text"
									id="beginDate" name="dateBegin" class="am-form-field"
									placeholder="开始时间" style="width: 90%" required readonly>
							</div>
							<div class="am-form-group am-form-icon am-input-group-sm">
								<i class="am-icon-calendar"></i> <input type="text" id="endDate"
									name="dateEnd" class="am-form-field" placeholder="结束时间"
									style="width: 90%" required readonly>
							</div>
							<div class="am-input-group am-input-group-sm">
								<input type="text" class="am-form-field" style="width: 90%"
									id="devicecode" name="devicecode" placeholder="设备ID" required> <span
									class="am-input-group-btn">
									<button class="am-btn am-btn-default" id="submit"  type="submit">搜索</button>
								</span>
							</div>

						</form>
					</div>

				</div>
			</div>
			<div class="am-g">
				<div class="am-u-sm-12">
					<form class="am-form">
						<table class="am-table am-table-striped am-table-hover table-main">
							<thead>
								<tr>
									<th class="table-check"><input type="checkbox"
										id="checkall" /></th>
									<th class="table-id">ID</th>
									<th class="table-title">设备</th>
									<th class="table-author am-hide-sm-only">经纬度</th>
									<th class="table-author am-hide-sm-only">地址</th>
									<th class="table-date am-hide-sm-only">发生时间</th>
									<th class="table-set">操作</th>
								</tr>
							</thead>

							<tbody id="pagecontainer">

							</tbody>
						</table>

						<hr />
					</form>
				</div>

			</div>
		</div>
	</div>
	</div>


	<script type="text/javascript">


var ldata=null;
var device=null;

$pagecontainer=$('#pagecontainer');

var timebeginpicker = $('#endDate').datetimepicker({
	  format: 'yyyy-mm-dd hh:ii',
	    autoclose :true,
	  
}
		);
var timeendpicker = $('#beginDate').datetimepicker({
	   format: 'yyyy-mm-dd hh:ii',
	    autoclose :true,
}
);
var devicecode='<%=request.getParameter("devicecode")%>';

		if (devicecode != 'null') {
			$('#devicecode').val(devicecode);
		}

		var $form = $('#condition');
		setFormValidate($form, function(data) {

			$form.on("submit", function(e) {
				return false;
			});
			if (data.code == '200') {
				device = data.result;
				
				if(typeof(device)=='undefined')
				myAlert("提示","没有信息")
				else
					{
					
					ldata = device.messages;
				
				drawDiffStatusContent($pagecontainer, ldata)
					}
			}
			if (data.code == '406') {
				myAlert('提示', '参数错误');
			}
			if (data.code == '403') {
				myAlert('提示', '重新登陆', function() {
					window.location.href = domain + '/Login.jsp';
				});
			}
			if (data.code == '500') {
				myAlert('提示', '没有这个设备', function() {
				});
			}
		});

		$("form").submit(function(e) {

			return false;
		});
		$pagecontainer.on('click', '.device', function(event) {
			var pid = event.currentTarget.id;
			var index = pid.replace('device', "");
			if (event.target.nodeName != 'BUTTON'
					&& event.target.nodeName != 'INPUT') {
				myPost(domain + '/userIndex.jsp', {
					'messageid' : ldata[index].messageid
				});
			}
		});

		$pagecontainer.on('click', '.del', function(event) {
			further('del', event.currentTarget.id)

		});

		$pagecontainer.on('click', '.look', function(event) {

			further('look', event.currentTarget.id)
		});
		$("#checkall").change(function() {
			if ($("#checkall").prop('checked'))
				$(".check").prop("checked", "checked");
			else
				$(".check").prop("checked", false);

		});
		$pagecontainer.on('click', '.check', function(event) {
	
			if (!$('#'+event.currentTarget.id).is(':checked'))
				$("#checkall").prop("checked", false);
		});
		$("#add").click(function() {
			window.location.href = domain+"/insertdevice.jsp";

		});
		$("#batchdelete").click(function() {
			var id = '?';
			$.each(ldata, function(i, item) {
				if ($('#check' + i).is(':checked'))
					id += 'messageid=' + item.messageid+'&';
			});
			if (id != '?') {
				id=id.substring(0,id.length-1);
				myAjax(domain+'/api/device/batch/.do'+id, {}, function(data) {
                  if(data.state=='success')
                	  myAlert('提示','操作成功');
                  window.location.href=domain+'/viewanddelete.jsp';
				});
			}
			else
				myAlert('提示','请选择操作的项目');
		});
		function drawDiffStatusContent($pagecontainer, data) {
			var temp = '';
			var address;
			$pagecontainer.empty();
			$.each(data,function(i, item) {
				geoc.getLocation(new BMap.Point(item.longtitude,item.latitude),function(rs) {
													var addComp = rs.addressComponents;
												
													address = addComp.city
															+ " "
															+ addComp.district
															+ "  "
															+ addComp.street
															+ "  "
															+ addComp.streetNumber;
													temp = '<td><div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs">'
															+ ' <button id=look'
				+ i
				+ ' class=" look am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-pencil-square-o"></span> 查看</button>'
															+ '  <button id=del'
				+ i
				+ ' class="del am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 删除</button>'

															+ ' </div> </div></td>';
															
													$pagecontainer
															.append(' <tr class="device" id=device'+i+'><td><input type="checkbox" id=check'+i+' class=check value='
					+ i 
					+ '></td><td>'
																	+ (i + 1)
																	+ '</td><td>'
																	+ device.devicename
																	+ '</td><td>'
																	+ '经度：'
																	+ item.longtitude
																	+ '  纬度：'
																	+ item.latitude

																	+ '</td><td>'
																	+ address
																	+ '</td> <td>'
																	+ item.happendtime
																	+ '</td>'
																	+ temp
																	+ '</tr>');
												
													
				               });

							});

		}
	</script>
</body>
</html>